<template>
  <div class="task-content">
    <div class="tabs">
      <div class="tab" :class="activeTab===0?'hoverClass': ''" @click="activeTab=0; queryGoingFlow();">执行中</div>
      <div class="tab" :class="activeTab===1?'hoverClass': ''" @click="activeTab=1">已结束</div>
    </div>
    <div class="content">
      <div v-if="activeTab===0">
        <el-switch
            v-model="showLeave"
            size="large"
            active-text="过滤请假流程单据"
            inactive-text="不过滤请假流程单据"
            @change="queryGoingFlow"
        />
        <div class="tab-going">
          <el-table :data="tableData" border style="width: 100%" v-loading="loading" max-height="650" height="650">
            <el-table-column prop="processDefinitionId" label="流程定义ID" />
            <el-table-column prop="name" label="任务名称" />
            <el-table-column prop="processInstanceId" label="流程实例ID" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="priority" label="优先级" />
            <el-table-column prop="assigneeName" label="任务审批人">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button type="text" size="small"
                           @click="openFlow(scope.row)"
                >操作
                </el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="total, prev, pager, next"
              :total="total"
              :current-page="page"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
      <div v-if="activeTab===1">
        <TaskHistory></TaskHistory>
      </div>
      <TaskDetail :visibleProp="visibleProp" @close="visibleProp=false" :taskId="taskId" @handleOk="queryGoingFlow"
      history-process-instance-id=""
      ></TaskDetail>
    </div>
  </div>
</template>

<script>
import TaskDetail from './Task-Detail.vue';
import TaskHistory from "./Task-History";
export default {
  name: "Task.vue",
  components: {TaskHistory, TaskDetail},
  data() {
    return {
      showLeave: false,
      activeTab: 0,
      tableData: [],
      total: 0,
      page: 1,
      loading: false,
      userData: [],
      currentRow: {},
      visibleProp: false,
      taskId: ''
    }
  },
  methods: {
    async queryAllUser() {
      let res = await this.$http.get(`/flowableapi/user/list`)
      if (res.data && res.data.success) {
        this.userData = res.data.data;
      }
      this.queryGoingFlow();
    },
    handleSizeChange() {},
    handleCurrentChange(val) {
      this.page = val;
      this.queryGoingFlow();
    },
    async openFlow(row) {
      this.taskId = row.id;
      this.visibleProp = true;
    },
    queryGoingFlow() {
      let params = {
        start: (this.page - 1) * 10,
        order: "desc",
        sort: "createTime"
      }
      if (this.showLeave) {
        params['processDefinitionKeyLike'] = 'leave_apply_2022'
      }
      this.loading = true;
      this.$http.get(`/flowableapi/runtime/tasks`, {params}).then((res) => {
        if (res.data) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
        this.tableData.forEach((e) => {
          if (e.assignee) {
            e.assigneeName = this.userData.filter(s => {
              return s.id.toString() === e.assignee;
            })[0].nickname;
          }
          if (e.createTime) {
            e.createTime = e.createTime.replace('T', ' ').replace('+', ' ')
          }
        })
        this.loading = false;
      })
    },
  },
  mounted() {
    this.queryAllUser()
  }
}
</script>

<style scoped lang="less">
.hoverClass {
  color: white;
  background-color: #0d84ff;
  cursor: pointer;
}
 .task-content {
   height: 100%;
   display: flex;
   .tabs {
     box-shadow:  /*顶部阴影*/ 0 10px 10px #D3D3D3;
     .tab:nth-child(2) {
       margin-top: .2rem;
     }
     .tab {
       width: 8rem;
       line-height: 4rem;
       padding: 1px;
       font-size: 2rem;
       &:hover {
        .hoverClass()
       }
     }
   }
   .businessKey {
     box-shadow: -10px 0 10px #F5F5F5, 10px 0 10px #F5F5F5,
       0 -10px 10px #F5F5F5,  0 10px 10px #F5F5F5;
     padding: 2rem;
     margin: 1rem 0rem;
   }
   .content {
     flex: 1;
     flex-grow: 1;
   }
 }
</style>
